<%--
  Created by IntelliJ IDEA.
  User: Kristina
  Date: 2020/7/25
  Time: 17:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>物流追踪</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=" Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <%--jq--%>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.5.1.js" type="text/javascript"></script>
    <%--    laiui 框架--%>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <%--    bootstrap 框架--%>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" type='text/css'>
    <%--    font-awesome 图标库--%>
    <link href="${pageContext.request.contextPath}/front/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <%--    高德地图API--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=5702b4a78aee7e6d4704e647d45a5e5d&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch,AMap.Geolocation,AMap.MouseTool"></script>
    <%--    项目 css--%>
    <link href="${pageContext.request.contextPath}/front/css/style.css" rel="stylesheet" type="text/css"/>
    <script src="${pageContext.request.contextPath}/front/js/publicFunctions.js" type="text/javascript"></script>
    <%--    <script src="${pageContext.request.contextPath}/static/clipboard.js-master/dist/clipboard.js" type="text/javascript"></script>--%>
    <style>
        #trackFormPanel:hover {
            transition: .6s;
            box-shadow: 0 0.5rem 1rem black;
            /*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);*/
        }
    </style>
</head>
<body class="layui-bg-gray">
<!-- //header -->
<header id="header" style="z-index: 51" class="pb-2 layui-bg-cyan">
    <div class="mx-auto d-flex pt-3 w-75">
        <!-- top header -->
        <%--        <div class="d-flex pt-3">--%>
        <div id="logo" class="align-self-center">
            <h1>
                <a href="${pageContext.request.contextPath}/index.jsp" style="text-shadow: 2px 2px black">码上物流</a>
            </h1>
        </div>
        <div class="align-self-center ml-5">
            <nav class="nav pt-2">
                <ul class="mt-2">
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/about.jsp">About Us</a>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/services.html">Services</a>
                    </li>
                    <li class="mr-3 mr-2 p-0">
                        <!-- First Tier Drop Down -->
                        <label for="drop-2" class="toggle">Dropdown<span class="fa fa-angle-down"
                                                                         aria-hidden="true"></span>
                        </label>
                        <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                        <input type="checkbox" id="drop-2"/>
                        <ul class="inner-dropdown rounded">
                            <li>
                                <a href="${pageContext.request.contextPath}/front/gallery.html">Our Gallery</a>
                            </li>
                            <li>
                                <a href="${pageContext.request.contextPath}/front/error.html">404 Error Page</a>
                            </li>
                            <li>
                                <a href="#">Add Link</a>
                            </li>
                        </ul>
                    </li>
                    <li class="mr-4 mr-2">
                        <a href="${pageContext.request.contextPath}/front/contact.html">Contact</a>
                    </li>
                    <li class="">
                        <a href="#subscribe">关于我们</a>
                    </li>
                </ul>
            </nav>
        </div>
        <%--        登录用户容器--%>
        <div id="userDiv" class="ml-auto top-grid d-flex"></div>
        <div class="d-flex ml-3 pb-2">
            <a href="javascript:void(0)" class="city text-white align-self-end"></a>
            <a href="javascript:void(0)" onclick="detectLocation()"
               class="fa fa-2x fa-location-arrow ml-3 location-icon align-self-end"></a>
        </div>
        <!-- top header -->

    </div>
</header>
<!-- //header -->
<div class="contact m-4">
    <div class="w-50 mx-auto display-4 text-center font-weight-bold">输入快递单号以查询快递</div>
    <div id="trackFormPanel" class="rounded p-3 m-3 w-50 mx-auto">
        <form class="layui-form" id="trackForm" lay-filter="trackForm">
            <div class="layui-form-item d-flex">
                <input type="text" class="layui-input" id="orderIds" name="orderIds" placeholder="输入快递单号，多个快递单号用空格隔开"
                       lay-verify="required">
                <button class="layui-btn layui-btn-danger" id="trackSubmit" lay-submit lay-filter="trackSubmit"
                        style="outline: none">
                    <span class="fa fa-search"></span>
                </button>
            </div>
        </form>
    </div>
    <div id="ordersTracks">
        <%--        <div class="container mx-auto m-3 p-3 shadow bg-white row">--%>
        <%--            <div class="col-5 shadow p-3">--%>
        <%--                <h4 class="p-3 font-weight-bold">--%>
        <%--                    订单号：EDS3VVB81595718066653--%>
        <%--                </h4>--%>
        <%--                <div class="d-flex justify-content-between mb-3 container">--%>
        <%--                    <h2 class="font-weight-bold">百色市</h2>--%>
        <%--                    <h3 class="align-self-center">发往</h3>--%>
        <%--                    <h2 class="font-weight-bold">厦门市</h2>--%>
        <%--                </div>--%>
        <%--                <ul class="layui-timeline">--%>
        <%--                    <li class="layui-timeline-item">--%>
        <%--                        <i class="layui-icon layui-timeline-axis"></i>--%>
        <%--                        <div class="layui-timeline-content layui-text">--%>
        <%--                            <div class="layui-timeline-title">2018年，layui 5.0--%>
        <%--                                发布。并发展成为中国最sdfdfdsfsdfsfdsfsdsdfdsfsdfsd受欢迎的前端UI框架（期望）--%>
        <%--                            </div>--%>
        <%--                        </div>--%>
        <%--                    </li>--%>
        <%--                    <li class="layui-timeline-item">--%>
        <%--                        <i class="layui-icon layui-timeline-axis"></i>--%>
        <%--                        <div class="layui-timeline-content layui-text">--%>
        <%--                            <div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 发布</div>--%>
        <%--                        </div>--%>
        <%--                    </li>--%>
        <%--                </ul>--%>
        <%--            </div>--%>
        <%--            <div class="col">--%>
        <%--                <div class="" style="height: 500px;">--%>

        <%--                </div>--%>
        <%--            </div>--%>
        <%--        </div>--%>
    </div>
</div>
<!-- //contact -->
<!-- footer-top -->
<section class="footer-top py-5">
    <div class="container">
        <div class="row footer-top-grid">
            <div class="col-sm-6">
                <h3>Contact Us</h3>
                <p>Call us, we are 24/7 Helpline</p>
            </div>
            <div class="col-sm-6 text-sm-right mt-sm-0 mt-3">
                <h3><span class="fa fa-phone" aria-hidden="true"></span> +11 2345 6789</h3>
            </div>
        </div>
    </div>
</section>
<!-- //footer-top -->
<!--footer -->
<div class="footer footer_w3layouts_section_1its py-5" id="subscribe">
    <div class="container pt-sm-4">
        <div class="row footer-grid">
            <div class="col-md-5 footer-grid_section_1its_w3">
                <div class="footer-title">
                    <h3>Who we are</h3>
                </div>
                <div class="footer-text">
                    <p>Curabitur non nulla sit amet nislinit tempus ipsum convallis quis ac lectus. lac inia eget
                        consectetur sed, convallis at tellus. Nulla porttitor accumsana tincidunt. Vestibulum ante ipsum
                        primis tempus.</p>
                    <ul class="social_section_1info">
                        <li>
                            <a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a>
                        </li>
                        <li>
                            <a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3 col-sm-5 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Useful Links</h3>
                </div>
                <ul class="links">
                    <li>
                        <a href="about.html">About Our Company</a>
                    </li>
                    <li>
                        <a href="services.html">Logistics Services</a>
                    </li>
                    <li>
                        <a href="#">Terms & Conditions</a>
                    </li>
                    <li>
                        <a href="#">Privicy Policy</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-4 col-sm-7 footer-grid_section_1its_w3 mt-md-0 mt-4">
                <div class="footer-title">
                    <h3>Subscribe</h3>
                </div>
                <div class="footer-text">
                    <p>By subscribing to our mailing list you will get latest news and updates from us.</p>
                    <form action="#" method="post">
                        <input type="email" name="Email" placeholder="Enter your email..." required="">
                        <button class="btn1"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        <div class="clearfix"></div>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- move top -->
        <div class="move-to-top text-center">
            <a href="#home" class="move-top"><span class="fa fa-angle-double-up" aria-hidden="true"></span></a>
        </div>
        <!-- //move top -->
        <div class="copyright">
            <p>© 2019 Logistic. All Rights Reserved | Design by
                <a href="http://w3layouts.com/">W3layouts</a>
            </p>
        </div>
    </div>
</div>
<input type="hidden" id="orderIdText" value="23">
<!-- //footer -->
<script src="${pageContext.request.contextPath}/front/js/fastLogin.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/front/js/ipLocation.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/front/js/publicFunctions.js" type="text/javascript"></script>

<script>
    const webServKey = "2fddcdbc01f779d6382b8439a7279f3e";
    let maps = [];
</script>
<script>
    $(function () {
        if ("${sessionScope.user.userId}" !== '') {
            loginUser = {};
            loginUser.userId = "${sessionScope.user.userId}";
            loginUser.userName = "${sessionScope.user.userName}";
            loginUser.userFace = "${sessionScope.user.userFace}";
            loginUser.uaerPhone = "${sessionScope.user.userPhone}";
        }

        // 加载layui模块
        // 加载layui模块
        layui.use('form', function () {
            form = layui.form;
            // 监听确认按钮提交
            form.on('submit(trackSubmit)', function (data) {
                $.each(maps, function () {
                    // this.destory();
                })
                let orderIds = form.val('trackForm').orderIds.trim().split(' ');
                sendGetTrackAjax(orderIds)
                return false;
            })
        });
        detectLocation();
        // 检测登陆
        detectLogin();
        if (getQueryString('orderId') !== null && getQueryString('orderId') !== '') {
            let data = [];
            data.push(getQueryString('orderId'))
            sendGetTrackAjax(data)
        }
    })

    function sendGetTrackAjax(orderIds) {
        $.ajax({
            type: "get",
            url: "/order/getOrdersByIds",
            async: true,
            traditional: true,
            data: {
                orderIds: orderIds
            },
            success: function (data) {
                $('#ordersTracks').empty();
                $.each(data, function (index) {
                    appendTracksForOneOrder(this);
                    // if (this.tracks.length !== 0) {
                    // let location = [this.tracks[0].house.address.lng, this.tracks[0].house.address.lat];
                    let map = new AMap.Map(this.orderId, {
                        // zoom: 10,  //设置地图显示的缩放级别
                        // center: location,//设置地图中心点坐标
                        // layers: [new AMap.TileLayer.RoadNet()],  //设置图层,可设置成包含一个或多个图层的数组
                        // mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
                        viewMode: '2D',  //设置地图模式
                        // lang: 'zh_cn',  //设置地图语言类型
                    });
                    var send = new AMap.Marker({
                        position: new AMap.LngLat(this.sendId.address.lng, this.sendId.address.lat),
                        offset: new AMap.Pixel(-10, -10),
                        // icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
                        title: this.sendId.address.addressName,
                        content: '<span class="fa fa-user-circle-o fa-2x text-primary"></span>'
                    });
                    var receive = new AMap.Marker({
                        position: new AMap.LngLat(this.receiveId.address.lng, this.receiveId.address.lat),
                        offset: new AMap.Pixel(-10, -10),
                        // icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
                        title: this.receiveId.address.addressName,
                        content: '<span class="fa fa-user-circle-o  fa-2x text-danger"></span>'
                    });
                    var path = [
                        new AMap.LngLat(this.sendId.address.lng, this.sendId.address.lat)
                    ];
                    if (this.tracks.length !== 0) {
                        var nowHouse = new AMap.Marker({
                            position: new AMap.LngLat(this.tracks[0].house.address.lng, this.tracks[0].house.address.lat),
                            offset: new AMap.Pixel(-10, -10),
                            // icon: '//vdata.amap.com/icons/b18/1/2.png', // 添加 Icon 图标 URL
                            title: this.tracks[0].house.houseName,
                            content: '<span class="fa fa-2x fa-cube"></span>'
                        });
                        for (let i = this.tracks.length - 2; i >= 0; i--) {
                            path.push(new AMap.LngLat(this.tracks[i].house.address.lng, this.tracks[i].house.address.lat))
                        }
                        map.add(nowHouse);
                    }

                    // 创建折线实例
                    var sendToReceive = new AMap.Polyline({
                        path: path,
                        borderWeight: .5, // 线条宽度，默认为 1
                        strokeColor: 'gray', // 线条颜色
                        lineJoin: 'round' // 折线拐点连接处样式
                    });
                    path.push(new AMap.LngLat(this.receiveId.address.lng, this.receiveId.address.lat));
                    map.add(sendToReceive);
                    map.add(send);
                    map.add(receive);
                    map.setFitView();
                    maps.push(map);
                    // }
                })
                console.log(data);
            }, error: function () {
                layer.msg('获取数据失败');
            }
        });
    }

    function appendTracksForOneOrder(order, index) {

        let content =
            '<div class="aTrack layui-anim layui-anim-upbit w-75 mx-auto m-3 p-4 shadow bg-white row" style="display: none">' +
            '<div class="col-5 shadow p-3">' +
            '<h4 class="p-3 font-weight-bold">' +
            '订单号：' + order.orderId +
            '</h4>' +
            '<div class="d-flex justify-content-between mb-3 container">' +
            '<h2 class="font-weight-bold">' + order.sendId.address.city + '</h2>' +
            '<h3 class="align-self-center">发往</h3>' +
            '<h2 class="font-weight-bold">' + order.receiveId.address.city + '</h2>' +
            '</div>' +
            '<ul class="layui-timeline">';
        if (order.tracks.length !== 0) {
            $.each(order.tracks, function () {
                if (this.opCode === '0') {
                    content += '<li class="layui-timeline-item">' +
                        '<i class="layui-icon layui-timeline-axis"></i>' +
                        '<div class="layui-timeline-content layui-text">' +
                        '<h2 class="font-weight-bold layui-timeline-title">' + this.dateTime.substr(0, 16) + '</h2>' +
                        '<p>快件已揽收' +
                        '<br>准备在 <a href="javascript:void(0)" class="font-weight-bold">' + this.house.houseName + '</a> 入库' +
                        '</p>' +
                        '</div>' +
                        '</li>';
                } else if (this.opCode === '1') {
                    content += '<li class="layui-timeline-item">' +
                        '<i class="layui-icon layui-timeline-axis"></i>' +
                        '<div class="layui-timeline-content layui-text">' +
                        '<h2 class="font-weight-bold layui-timeline-title">' + this.dateTime.substr(0, 16) + '</h2>' +
                        '<p>快件已在 <a href="javascript:void(0)" class="font-weight-bold">' + this.house.houseName + '</a> 入库' +
                        '<br>准备装车发往  <a href="javascript:void(0)" class="font-weight-bold">' + this.nextHouse.houseName + '</a>' +
                        '</p>' +
                        '</div>' +
                        '</li>';
                } else if (this.opCode === '2') {
                    content += '<li class="layui-timeline-item">' +
                        '<i class="layui-icon layui-timeline-axis"></i>' +
                        '<div class="layui-timeline-content layui-text">' +
                        '<h2 class="font-weight-bold layui-timeline-title">' + this.dateTime.substr(0, 16) + '</h2>' +
                        '<p>快件已从 <a href="javascript:void(0)" class="font-weight-bold">' + this.house.houseName + '</a> 出库' +
                        '<br>装车发往 <a href="javascript:void(0)" class="font-weight-bold">' + this.nextHouse.houseName + '</a>' +
                        '</p>' +
                        '</div>' +
                        '</li>';
                } else if (this.opCode === '3') {
                    content += '<li class="layui-timeline-item">' +
                        '<i class="layui-icon layui-timeline-axis"></i>' +
                        '<div class="layui-timeline-content layui-text">' +
                        '<h2 class="font-weight-bold layui-timeline-title">' + this.dateTime.substr(0, 16) + '</h2>' +
                        '<p>快件已从 <a href="javascript:void(0)" class="font-weight-bold">' + this.house.houseName + '</a> 出库' +
                        '<br>正在由快递员进行派送' +
                        '</p>' +
                        '</div>' +
                        '</li>';
                }
            })
        } else {
            content += '<li class="layui-timeline-item">' +
                '<i class="layui-icon layui-timeline-axis"></i>' +
                '<div class="layui-timeline-content layui-text">' +
                '<h2 class="font-weight-bold layui-timeline-title">暂时没有物流信息</h2>' +
                '</div>' +
                '</li>';
        }

        content += '</ul>' +
            '</div>' +
            '<div class="col">' +
            '<div id="' + order.orderId + '" class="" style="height: 600px;">' +
            // 地图部分
            '</div>' +
            '</div>' +
            '</div>';
        $('#ordersTracks').append(content);
        $('#ordersTracks .aTrack').show();

    }

    $(document).on('mouseover', '.fa-user-circle-o', function () {
        $(this).removeClass('fa-user-circle-o');
        $(this).addClass('fa-user-circle');
    })
    $(document).on('mouseout', '.fa-user-circle', function () {
        $(this).removeClass('fa-user-circle');
        $(this).addClass('fa-user-circle-o');
    })
</script>
</body>
</html>
